<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.slim.min.js"></script>
</head>
<body>
    <!-- <button>按钮</button> -->
    <div id="content">
        <span id="element">页面元素</span>
    </div>

    <input type="text" id="nothing" value="111">
    <script>
        // $(document).ready(function(){
        //     $("button").click(function(){
        //         $(this).hide();
        //     })
        // });

        $("#content").click(function(){
            // 获取页面元素
            // 打印文本
            console.log($(this).text());
            // 打印html语句
            console.log($(this).html());

            // 修改页面元素
            console.log($(this).text("点击后的内容"));
            // 这里的/会被转义，使用html方法将标签放在里面即可
            // console.log($(this).text(<h1>"点击后的内容"</h1>));
            console.log($(this).html("<h1>点击后的内容</h1>"));

            // 对于表单元素，使用val取值
            console.log($("#nothing").val());
        });
        
    </script>
</body>
</html>